import { DownOutlined, UpOutlined } from '@ant-design/icons';
import {ProForm, QueryFilter} from '@ant-design/pro-components';
import {Col, DatePickerProps, Input, InputNumber, Row, Select, Space, Tabs } from 'antd';
import React, {useRef, useState} from 'react';
import type { SelectProps } from 'antd';

import { DatePicker } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker';


type AdvancedSearchProps = {
  onFilterChange?: (allValues: any) => void;
  onSearch?: (text: string, options: string[] ,fan: number, zan: number, comment: number, dataString: [string, string] | string, share: number) => void;
  onTypeChange?: (type: string) => void;
  defaultType?: string;
  onRefChange?: (num1: any, num2: any, num3: any, options: React.MutableRefObject<null>) => void;
  options: SelectProps['options']
};

const AdvancedSearch: React.FC<AdvancedSearchProps> = (props) => {
  const { onSearch, onTypeChange, defaultType = 'articles', onFilterChange, onRefChange, options } = props;
  const [searchText, setSearchText] = useState<string>();
  const [showFilter, setShowFilter] = useState<boolean>(false);
  const [dataString, setDataString] = useState<[string, string] | string>();
  const [share, setShare] = useState<any>(0);
  const [fan, setFan] = useState<any>(0);
  const [zan, setZan] = useState<any>(0);
  const [comment, setComment] = useState<any>(0);
  const selects: string[] = [];
  const selectsRef = useRef<string[]>([]);
  // const options: SelectProps['options'] = [];
  const { RangePicker } = DatePicker;



  const onChange = (
    value: DatePickerProps['value'] | RangePickerProps['value'],
    dateString: [string, string] | string,
  ) => {
    setDataString(dataString)
  };

  const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
    console.log('onOk: ', value);
  };

  const befOnSearch = (query: string) => {

    if (onSearch) {
      //alert(selectsRef.current)
      console.log(selects)
      onSearch(query, selectsRef.current || [],fan, zan, comment, dataString as [string, string] | string, share)
    }
  }

  //const location = useLocation();



  const handleChange = (value: string[]) => {
    console.log(`selected ${value}`);
    selects.push(...value)
    selectsRef.current?.push(...value);
    //setSelectsState(selects);
  };

  const num1Ref = useRef(null)
  const num2Ref = useRef(null)
  const num3Ref = useRef(null)
  const optionsRef = useRef(null)

  // 在子组件中定义回调函数，将ref对象传递给父组件
  React.useEffect(() => {
    if (onRefChange) {
      onRefChange(num1Ref, num2Ref, num3Ref, optionsRef);
    }
  }, [onRefChange, num1Ref, num2Ref, num3Ref, optionsRef]);


  return (
    <div
      style={{
        padding: 24,
        width: '90%'
      }}
    >
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: 16,
        }}
      >
        <Input.Search
          placeholder="请输入"
          enterButton="搜索"
          value={searchText}
          onChange={(e) => {
            setSearchText(e.target.value);
          }}
          onSearch={befOnSearch}
          style={{ width: '100%'}}
        />
        <div
          style={{
            width:'100%',
            display: 'flex',
            gap: 12,
          }}
        >
        </div>
      </div>

      <Tabs
        defaultActiveKey={defaultType}
        onChange={onTypeChange}
        tabBarExtraContent={
          <a
            style={{
              display: '100%',
              gap: 4,
            }}
            onClick={() => {
              setShowFilter(!showFilter);
            }}
          >
            高级搜索 {showFilter ? <UpOutlined /> : <DownOutlined />}
          </a>
        }

      />

      {showFilter ? (
        <QueryFilter submitter={false} span={24} style={{ width: '100%'}} split onChange={onFilterChange}>
          <ProForm.Group title="类别" style={{width: '100%'}}>
            <Space style={{ width: '100%', display: "flex", flexWrap: "wrap" }} direction="vertical">
              <Select
                mode="multiple"
                allowClear
                style={{ width: '100%', minWidth: "150px"}}
                placeholder="请选择分区类别"
                onChange={handleChange}
                options={options}
              />
            </Space>
          </ProForm.Group>
          <Row>
            <Col span={8}>
              <div>
                最少粉丝数：
                <InputNumber onChange={(e) => {
                  return setFan(e);
                }} min={1} defaultValue={1} type={"number"}/>
              </div>
            </Col>
            <Col span={8}>
              <div>
                最少点赞数：
                <InputNumber onChange={(e) => {
                  return setZan(e);
                }} min={1} defaultValue={1} type={"number"} />
              </div>
            </Col>
            <Col span={8}>
              <div>
                最小评论数：
                <InputNumber
                  onChange={(e) => {
                    return setComment(e);
                  }}
                  min={1} defaultValue={1} type={"number"} />
              </div>
            </Col>
          </Row>
          <Row>
            <Col span={8}>
              <div>
                最少转发数：
                <InputNumber onChange={(e) => {
                  return setShare(e);
                }} min={1} defaultValue={1} type={"number"}/>
              </div>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <div>
                时间范围选择：
                <Space direction="vertical" size={12}>
                  <RangePicker
                    showTime={{ format: 'HH:mm' }}
                    format="YYYY-MM-DD HH:mm"
                    onChange={onChange}
                    onOk={onOk}
                  />
                </Space>
              </div>
            </Col>

          </Row>


        </QueryFilter>
      ) : null}
    </div>
  );
};

export default AdvancedSearch;
